<template>
  <div class="qlf-container">
    <div class="head">
      <Aradio v-model="certificate" :options="options" />
    </div>
    <div class="main" v-loading="loading">
      <template v-if="certificate === 1">
        <div class="form-main">
          <div class="title">资格证书</div>
          <div class="gray-line"></div>
          <el-form
              :model="formData"
              ref="form1"
              label-position="top"
              class="form"
          >
            <el-row :gutter="160">
              <el-col :span="8">
                <el-form-item label="姓名" prop="realname">
                  <el-input v-model="formData.realname" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                    label="证书名称"
                    prop="paperCertName"
                    :rules="$validate.maxLength(true, 0, 50)"
                >
                  <el-input v-model.trim="formData.paperCertName" :disabled="disabled"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                    label="资格证书编号"
                    prop="paperCertCode"
                    :rules="$validate.maxLength(true, 0, 50)"
                >
                  <el-input v-model.trim="formData.paperCertCode" :disabled="disabled"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="btn">
            <el-button type="primary" @click="submitForm" :disabled="disabled">提交修改</el-button>
          </div>
        </div>
        <div class="form-main" v-if="formData.regCert">
          <div class="title">注册证书</div>
          <div class="gray-line"></div>
          <el-form
              :model="formData"
              ref="form2"
              label-position="top"
              class="form"
          >
            <el-row :gutter="160">
              <el-col :span="8">
                <el-form-item label="注册证书编号" prop="certCode">
                  <el-input
                      v-model="formData.regCert.certCode"
                      disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业名称" prop="major">
                  <el-input v-model="formData.regCert.major" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="聘用单位" prop="employUnit">
                  <el-input
                      v-model="formData.regCert.employUnit"
                      disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="160">
              <el-col :span="8">
                <el-form-item label="有效期" prop="validDate">
                  <el-input
                      v-model="formData.regCert.validDate"
                      disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发证日期" prop="certTime">
                  <el-input
                      v-model="formData.regCert.certTime"
                      disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证书下载" prop="postalCode">
                  <el-button type="primary" size="mini" @click="down"
                  >立即下载</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
      <template v-else-if="certificate === 3">
        <div class="form-main">
          <div class="title">安管人员知识考试</div>
          <div class="gray-line"></div>
          <div class="form-line">
            <div class="text1">企业主要负责人（A类）：</div>
            <div class="text2">合格</div>
            <el-checkbox class="number"
                         v-model="mainChecked"
                         :checked="formData.mainScore > 0"
                         :disabled="disabled"
            ></el-checkbox>
            <div class="text3">证书编号：</div>
            <div class="code">{{ formData.mainCertCode }}</div>
            <div class="text4">发证日期：</div>
            <div class="date">{{ formData.mainEffStart }}</div>
            <div class="text5">有效期：</div>
            <div class="date">{{ formData.mainEffEnd }}</div>
            <el-button class="btn" :disabled="!formData.mainCertCode" type="primary" size="mini" @click="download('A')">下载证书</el-button>
          </div>
          <div class="form-line">
            <div class="text1">项目负责人（B类）：</div>
            <div class="text2">合格</div>
            <el-checkbox class="number"
                         v-model="projChecked"
                         :checked="formData.projScore > 0"
                         :disabled="disabled"
            ></el-checkbox>
            <div class="text3">证书编号：</div>
            <div class="code">{{ formData.projCertCode }}</div>
            <div class="text4">发证日期：</div>
            <div class="date">{{ formData.projEffStart }}</div>
            <div class="text5">有效期：</div>
            <div class="date">{{ formData.projEffEnd }}</div>
            <el-button class="btn" :disabled="!formData.projCertCode" type="primary" size="mini" @click="download('B')">下载证书</el-button>
          </div>
          <div class="form-line">
            <div class="text1">专职安全生产管理人员（C类）：</div>
            <div class="text2">合格</div>
            <el-checkbox class="number"
                         v-model="classifyChecked"
                         :checked="formData.classifyScore > 0"
                         :disabled="disabled"
            ></el-checkbox>
            <div class="text3">证书编号：</div>
            <div class="code">{{ formData.classifyCertCode }}</div>
            <div class="text4">发证日期：</div>
            <div class="date">{{ formData.classifyEffStart }}</div>
            <div class="text5">有效期：</div>
            <div class="date">{{ formData.classifyEffEnd }}</div>
            <el-button class="btn" :disabled="!formData.classifyCertCode" type="primary" size="mini" @click="download('C')">下载证书</el-button>
          </div>
          <div class="btn">
            <el-button type="primary" @click="submitForm" :disabled="disabled">提交修改</el-button>
          </div>
        </div>
        <div class="form-main" v-if="formData.regCert">
          <div class="title">注册证书</div>
          <div class="gray-line"></div>
          <el-form
              :model="formData"
              ref="form2"
              label-position="top"
              class="form"
          >
            <el-row :gutter="160">
              <el-col :span="8">
                <el-form-item label="注册证书编号" prop="certCode">
                  <el-input
                      v-model="formData.regCert.certCode"
                      disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业名称" prop="major">
                  <el-input v-model="formData.regCert.major" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="聘用单位" prop="employUnit">
                  <el-input
                      v-model="formData.regCert.employUnit"
                      disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="160">
              <el-col :span="8">
                <el-form-item label="有效期" prop="validDate">
                  <el-input
                      v-model="formData.regCert.validDate"
                      disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发证日期" prop="certTime">
                  <el-input
                      v-model="formData.regCert.certTime"
                      disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证书下载" prop="postalCode">
                  <el-button type="primary" size="mini" @click="down">立即下载</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Aradio from '@/components/Radio/Aradio';
import userApi from '@/api/user';
import registerDict from '@/assets/js/registerDict.js';
import { decrypt } from '@/utils/sms4util';

export default {
  components: { Aradio },
  data() {
    return {
      certificate: 1,
      options: [
          { label: '二级造价工程师', value: 1 },
          { label: '安管人员知识考试', value: 3}
      ],
      formData: {},
      prePathQuery: {},
      safeTypeDict: registerDict.safeType,
      disabled: false,
      mainChecked: false,
      projChecked: false,
      classifyChecked: false,
      loading: false
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userInfo.id;
    },
    userType() {
      return this.$store.state.user.userInfo.userType;
    },
  },
  created() {},
  mounted() {
    this.prePathQuery = this.$route.params;
    const {disabled, certificate} = this.prePathQuery;
    this.disabled = disabled;
    if (this.certificate == certificate) {
      this.init()
    } else {
      this.certificate = certificate;
    }
  },
  watch: {
    // 监听路由变化
    certificate(val) {
      this.formData = {};
      this.init(val);
    },
    mainChecked(val) {
      this.formData.mainScore = val ? 100 : 0;
    },
    projChecked(val) {
      this.formData.projScore = val ? 100 : 0;
    },
    classifyChecked(val) {
      this.formData.classifyScore = val ? 100 : 0;
    },
    formData(val) {
      this.mainChecked = val.mainScore > 0;
      this.projChecked = val.projScore > 0;
      this.classifyChecked = val.classifyScore > 0;
    }
  },
  methods: {
    // 获取用户信息
    async init(val) {
      this.loading = true;
      let params = {
        id: this.userId,
        type: val || this.userType,
      };
      const res = await userApi.getUserInfo(params);
      this.formData = {
        ...this.formData,
        ...res,
        phone: res.phone ? decrypt(res.phone) : '',
        paperCode: res.paperCode ? decrypt(res.paperCode) : '',
        ...res.safeQua
      };
      this.loading = false;
    },
    // 提交表单
    async submitForm() {
      if (this.certificate == 3) {
        try {
          let params = {
            ...this.formData,
            userType: this.userType,
          };
          await userApi.editSafeInfo(params);
          this.$message.success('修改成功');
          if (this.prePathQuery.key) {
            this.$router.push({
              path: '/dockPersonalApplyStep',
              query: this.prePathQuery,
            });
          } else {
            this.$router.back();
          }
        } catch (error) {
          console.log(error);
        }
      } else if (this.certificate == 1 || this.certificate == 2) {
        try {
          await this.$validate.checkValidate(this.$refs.form1);
          let params = {
            ...this.formData,
            userType: this.userType,
          };
          await userApi.editUserInfo(params);
          this.$message.success('修改成功');
          if (this.prePathQuery.key) {
            this.$router.push({
              path: '/dockPersonalApplyStep',
              query: this.prePathQuery,
            });
          } else {
            this.$router.back();
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    numberChange(val, key) {
      let num = Math.min( 100, Number(val.replace(/\D/g)));
      num = Math.max(num, 0);
      this.$nextTick(() => {
        this.formData[key] = num;
      })
    },
    down() {
      window.open(this.formData?.regCert?.certFile?.fileUri);
    },
    download(type) {
      switch (type) {
        case 'A':
          window.open(this.formData?.mainCertFile?.fileUri);
          break;
        case 'B':
          window.open(this.formData?.projCertFile?.fileUri);
          break;
        case 'C':
          window.open(this.formData?.classifyCertFile?.fileUri);
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.qlf-container {
  margin: 20px auto;
  width: 1200px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .head {
    width: 100%;
    height: 80px;
    padding: 0 30px;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  .main {
    margin-top: 18px;
    flex: 1;
    background-color: #fff;
    .form-main {
      padding: 20px;
      .form-line {
        margin-top: 24px;
        width: 100%;
        display: flex;
        line-height: 40px;
        .text1 {
          margin-left: 20px;
          width: 220px;
          text-align: left;
        }
        .text2 {
          margin: 0px 14px;
        }
        .text4 {
          margin: 0px 14px;
        }
        .text3 {
          margin: 0 14px;
        }
        .text5 {
          margin: 0 14px;
        }
        .code {
          width: 160px;
        }
        .number {
          width: 70px;
          ::-webkit-inner-spin-button,
          ::-webkit-outer-spin-button{
            -webkit-appearance: none;
          }
        }
        .date {
          width: 100px;
        }
        .btn {
          margin-left: 20px;
          height: 40px;
          width: 100px;
        }
      }
      .title {
        height: 40px;
        font-size: 18px;
        font-weight: 600;
        border-bottom: 1px solid #f2f2f2;
      }
      .form {
        margin-top: 20px;
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .form-main:first-child {
      border-bottom: 1px solid #f2f2f2;
    }
  }
}
</style>
